<template>
  <el-container>
    <app-navbar></app-navbar>
    <el-header>
      <div class="header-background">
        <h1 class="main-title">欢迎来到惊喜一餐</h1>
      </div>
    </el-header>
    <el-main>
      <div class="announcement">
        <el-alert title="🍽️ 最新公告：我们的新菜单上线啦！" type="info" />
      </div>
      <el-row :gutter="20" class="restaurant-row">
        <el-col v-for="restaurant in recommendedRestaurants" :key="restaurant.id" :span="8">
          <el-card class="restaurant-card">
            <img class="restaurant-image" :src="restaurant.image" alt="餐厅图片" />
            <div class="card-content">
              <h3>{{ restaurant.name }}</h3>
              <p>评分: {{ restaurant.rating }}</p>
              <el-button type="warning" @click="viewDetails(restaurant.id)">查看详情</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import AppNavbar from '@/components/AppNavbar.vue';

export default {
  name: 'HomePage',
  components: {
    AppNavbar,
  },
  data() {
    return {
      recommendedRestaurants: [
        { id: 1, name: '耿福兴', rating: 4.9, image: require('../assets/images/restaurantA.jpg') },
        { id: 2, name: '海鲜餐馆', rating: 4.7, image: require('../assets/images/restaurantB.jpg') },
        { id: 3, name: '农家小炒', rating: 4.8, image: require('../assets/images/restaurantC.jpg') },
      ],
    };
  },
  methods: {
    viewDetails(id) {
      this.$router.push({ name: 'RestaurantDetail', params: { id } });
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #FFD700; /* Header 背景颜色 */
  padding: 20px; /* 内边距 */
  text-align: center; /* 中心对齐 */
}

.main-title {
  color: #fff; /* 主标题颜色 */
  margin: 0; /* 去掉默认 margin */
  font-size: 2.5em; /* 标题大小 */
}

.announcement {
  margin: 30px 0; /* 公告间距 */
}

.restaurant-row {
  margin: 20px 0; /* 行间距 */
}

.restaurant-card {
  transition: transform 0.3s;
}

.restaurant-card:hover {
  transform: scale(1.05); /* 悬浮效果 */
}

.restaurant-image {
  width: 100%; /* 自适应宽度 */
  height: 200px; /* 固定高度 */
  object-fit: cover; /* 保持图片比例 */
}

.card-content {
  padding: 15px;
  text-align: center;
}

.el-main {
  background-color: #fff8e1; /* 浅黄色背景 */
  padding: 20px; /* 内边距 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
</style>